const { useState, useEffect } = React;
const { Button, Space, Input, Tag, List, Typography, message, Modal, Form } = antd;



function PtForm({ visible, data, onCancel, onSave }) {
  const [form] = Form.useForm();
  const varTypes = ['input', 'radio', 'switch', 'checkbox'];

  React.useEffect(() => {
    form.resetFields();
    if (data) form.setFieldsValue(data);
  }, [data]);

  return (
    <Modal
      title={data ? "编辑提示词" : "新建提示词"}
      visible={visible}
      onCancel={onCancel}
      onOk={() => form.submit()}
    >
      <Form form={form} onFinish={values => onSave(values)}>
        <Form.Item label="名称" name="name" rules={[{ required: true }]}>
          <Input />
        </Form.Item>
        
        <Form.Item label="内容" name="content" rules={[{ required: true }]}>
          <Input.TextArea rows={4} />
        </Form.Item>

        <Form.Item label="变量配置" name="vars">
          <Form.List name="vars">
            {(fields, { add, remove }) => (
              <>
                {fields.map(({ key, name }) => (
                  <div key={key} style={{ display: 'flex', gap: 8 }}>
                    <Form.Item name={[name, 'type']}>
                      <Select options={varTypes.map(t => ({ value: t, label: t }))} />
                    </Form.Item>
                    <Form.Item name={[name, 'label']}>
                      <Input placeholder="变量说明" />
                    </Form.Item>
                    <Button danger onClick={() => remove(name)}>删除</Button>
                  </div>
                ))}
                <Button onClick={() => add()}>添加变量</Button>
              </>
            )}
          </Form.List>
        </Form.Item>

        <Form.Item label="标签" name="tags">
          <Select mode="tags" />
        </Form.Item>
      </Form>
    </Modal>
  );
}
